<template>
  <view class="container">
	  
    <swiper class="round swiper" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
      <swiper-item v-for="item in SwiperItem" :key="item.id">
        <view class="swiper-item">
          <image :src="item.img" alt="图片" class="swiper-image"></image>
          <text class="swiper-text">{{ item.text }}</text>
        </view>
      </swiper-item>
    </swiper>
	
	<div class="introduction span-top-20">
		<TheBoxVue></TheBoxVue>
	</div>
	
	<div class="activities span-top-20">
		<IndexActivity></IndexActivity>
	</div>
	
	<div class="news span-top-20">
		<IndexNewsVue></IndexNewsVue>
	</div>
	
	<div class="team span-top-20">
		<BaseAvatarVue></BaseAvatarVue>
	</div>
  </view>
</template>

<script setup>
import { ref } from 'vue';
import TheBoxVue from '../../components/TheBox.vue';
import IndexActivity from '../../components/IndexActivity.vue';
import IndexNewsVue from '../../components/IndexNews.vue';
import BaseAvatarVue from '../../components/BaseAvatar.vue';
const SwiperItem = ref([
  { id: 1, text: '内容 1', img: '/static/testImage.jpg'},
  { id: 2, text: '内容 2', img: '/static/testImage.jpg'},
  { id: 3, text: '内容 3', img: '/static/testImage.jpg'},
  { id: 4, text: '内容 4', img: '/static/testImage.jpg'},
  { id: 5, text: '内容 5', img: '/static/testImage.jpg'}
]);
</script>

<style scoped>
.container {
  padding: 20px;
  font-size: 14px;
  line-height: 24px;
}

.round {
	border-radius: 10px;
}


.swiper {
	overflow: hidden;
	height: 230px;
}

.swiper-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 230px; 
  position: relative;
}

.swiper-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.swiper-text {
  position: absolute;
  z-index: 999;
  bottom: 20px;
  color: white;
}

.span-top-20 {
	margin-top: 20px;
}
</style>